<template>
  <div class="flex_aj column">
    <div><i class="el-icon-star-on"></i>基础信息</div>
    <div class="box">
      <r-list
        :ColsNum="2"
        :width="120"
        :ListCols="ListCols"
        ListType="Info"
        :ListData="ListData"
      ></r-list>
    </div>
    <div class="mt20">
      <el-button
        v-if="ListData.state == 1"
        @click="open"
        type="success"
        class=""
        >处理</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //基础信息
      ListCols: [
        [
          {
            label: "工单编号",
            prop: "id"
          },
          {
            label: "处理结果",
            prop: "state",
            formatter: e =>
              e.state == 1 ? "待处理" : e.state == 2 ? "已处理" : ""
          },
          {
            label: "Device Number",
            prop: "equipmentNo"
          },
          {
            label: "Belonging Agent商",
            prop: "regionalName"
          },
          {
            label: "所属商家",
            prop: "merchantName"
          },
          {
            label: "设备地址",
            prop: "address"
          },
          {
            label: "报障人",
            prop: "nickName"
          },
          {
            label: "联系方式",
            prop: "phone"
          },
          {
            label: "反馈内容",
            prop: "remark"
          },
          {
            label: "反馈图片",
            prop: "pic",
            type: "img",
            imglook: true
          },
          {
            label: "Maintenance Personnel",
            prop: "name"
          },
          {
            label: "处理时间",
            prop: "repairTime"
          },
          {
            label: "处理人",
            prop: "name"
          },
          {
            label: "Maintenance处理Remarks",
            prop: "handleRemark"
          }
        ]
      ],
      ListData: {}
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res = await this.api.errinfo({
        id: this.$route.query.id
      });
      if (res) {
        let param = {
          regionalName: res.data.device.regionalName,
          merchantName: res.data.device.merchantName,
          address: res.data.device.address
        };
        console.log(res.data.device);
        this.ListData = { ...res.data.faultOrder, ...param };
        this.ListData.pic = res.data.faultOrder.picture.split(",");
      }
    },
    open() {
      this.$confirm("是否确认已处理完毕?", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      }).then(async () => {
        let res = await this.api.puterr({ id: this.ListData.id });
        if (res) {
          this.$message({
            type: "success",
            message: "反馈Success!"
          });
          this.init();
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.box {
  width: 80%;
  margin: 0 auto;
}
</style>
